import React, { useState, useEffect } from 'react';

/**
 * 如果函数的名字以 “use” 开头并调用其他 Hook，我们就说这是一个自定义 Hook。
 * useSomething 的命名约定可以让我们的 linter 插件在使用 Hook 的代码中找到 bug。
 * Hook 是一种复用状态逻辑的方式，它不复用 state 本身。
 * @param {*} friendID 
 * @returns 
 */
function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

export default useFriendStatus;



// 自定义hooks的使用：

// function FriendStatus(props) {
//   const isOnline = useFriendStatus(props.friend.id);

//   if (isOnline === null) {
//     return 'Loading...';
//   }
//   return isOnline ? 'Online' : 'Offline';
// }


// function FriendListItem(props) {
//   const isOnline = useFriendStatus(props.friend.id);

//   return (
//     <li style={{ color: isOnline ? 'green' : 'black' }}>
//       {props.friend.name}
//     </li>
//   );
// }


// 其他hook, useContext、useReducer:

// function Example() {
//   const locale = useContext(LocaleContext);
//   const theme = useContext(ThemeContext);
//   // ...
// }
// function Todos() {
//   const [todos, dispatch] = useReducer(todosReducer);
//   // ...
// }